<template>
    <div id="box">
        <div id="qq">
            <div id="aa">
                <span class="fa fa-angle-left" @touchstart="back"></span>
            </div>
            <div id="zz">上传头像</div>
            <div id="ww">···</div>
        </div>
        <label for="header" id="headerlabel" ref="headerlabel">
            <span>+</span>
            <p>点击添加图片或将图片拖拽至此</p>
        </label>
        <input type="file" id="header" name="header" style="display:none" accept="image/*" @change="header" multiple>
        <br>
        <button id="btn" @touchstart="upload">上传</button>
    </div>
</template>
<script>
    export default {
        data: function () {
            return {
                sendFile: null,
            }
        },
        methods: {
            back: function () {
                history.back()
            },
            header: function (e) {
                var file = e.target.files[0];
                this.sendFile = file;
                var url = URL.createObjectURL(file);
                this.$refs.headerlabel.style.backgroundImage = ("background-image", "url(" + url + ")");
                this.$refs.headerlabel.textContent = "";
            },
            upload: function () {
                var formdata = new FormData();
                formdata.append('header', this.sendFile); 
                this.$store.dispatch("requestUpload", formdata)
                    .then(res => {
                        location.hash = "/user/Myself"
                        // this.layer.alert(res.data.msg);
                    });
            }
        }
        
    }

</script>

<style scoped>
    #title {
        width: 100%;
        height: 7vh;
        border: solid 1px gainsboro;
        line-height: 7vh;
    }

    #qq {
        display: flex;
        height: 10vh;
        width: 100vw;
        border-bottom: solid 2px #bbb;
    }

    #aa {
        width: 10vh;
        height: 10vh;
        font-size: 8vh;
        text-align: center;
        line-height: 10vh;
        color: #999;
    }

    #zz {
        width: 50vh;
        text-align: center;
        line-height: 10vh;
    }

    #ww {
        width: 10vh;
        height: 10vh;
        font-size: 10vh;
        text-align: center;
        line-height: 10vh;
        color: #999;
    }

    #avatar {
        margin-left: 32vw;
        font-size: 18px;
    }

    #back {
        cursor: pointer;
        font-size: 25px;
    }

    #box {
        background-color: #eee;
        height: 100vh;
    }

    #headerlabel {
        display: block;
        width: 100px;
        height: 100px;
        border: solid 5px pink;
        text-align: center;
        background-size: 100% 100%;
        margin: 0 auto;
        margin-top: 6vh;
    }

    #headerlabel span {
        font-size: 50px;
    }

    #headerlabel p {
        font-size: 5px;
    }

    button {
        cursor: pointer;
        width: 90%;
        height: 7vh;
        margin-left: 5vw;
        margin-top: 5vh;
        background-color: #FF9E93;
        border: solid 1px #FF9E93;
        border-radius: 8px;
        color: white;
        font-size: 20px;
    }
</style>